<template>
    <div>
      <input type="text" placeholder="请输入用户的id" v-model="id">
      <button @click="toUser">click</button>
      <!--为userDetail进行占位的-->
      <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "user",
        data(){
          return {
            id:""
          }
        },
        methods:{
          toUser(){
            // this.$router.push(`/user/${this.id}?name=damu&age=18`)
            //params & path 是不能同时出现的
            //使用到命名路由
            //什么是命名路由? 给路由取名
            //什么时候该用命名路由? 当使用编程式路由跳转时;需要指定params 那只能使用命名路由;因为path和params直接有冲突
            this.$router.push({
               // path:`/user`,
               name:"user",
               params:{
                  id:this.id
               },
               query:{
                 name:"damu",
                 age:188
               }
            })
          }
        }
    }
</script>

<style scoped>

</style>
